<template>
	<view class="examine-page">
		<view class="tab-box">
			<u-tabs :list="tabList" :current="current" :scrollable="false" @change="changeTab"></u-tabs>
		</view>
		
		<view class="list">
			<view class="item-box" v-for="(item, index) in this_data_list" :key="index" v-if="this_data_list.length > 0">
				<!-- <view class="text flex">
					<view class="label">
						<view>审核状态：</view>
						<view class="tibetan">ཡིག་སྒྱུར་མཇ：</view>
					</view>
					<view class="value" :class="{ 'wait': item.a_status == 0, 'complete': item.a_status == 1, 'fail': item.a_status == 2 }">
						<view v-if="item.a_status == 0">待审核</view>
						<view v-else-if="item.a_status == 1">已审核</view>
						<view v-else>已驳回</view>
					</view>
				</view> -->
				<view class="text flex">
					<view class="label">
						<view>举报原因：</view>
						<view class="tibetan">ཐེར་འདོན་རྒྱུ་རྐྱེན་：</view>
					</view>
					<view class="value">
						<view>{{item.a_jubao_title}}</view>
					</view>
				</view>
				<view class="text flex">
					<view class="label">
						<view>举报类型：</view>
						<view class="tibetan">ཐེར་འདོན་གྱི་རིགས་།：</view>
					</view>
					<view class="value">
					<view>{{item.jubao_cate_name}}</view>
					<view class="tibetan">{{item.jubao_cate_name_en}}</view>
					</view>
				</view>
				<view class="text flex">
					<view class="label">
						<view>举报来源：</view>
						<view class="tibetan">ཐེར་འདོན་ཡོང་ཁུངས།：</view>
					</view>
					<view class="value">
						<view>{{item.jubao_type_name}}</view>
						<view class="tibetan">{{item.jubao_type_name_en}}</view>
					
					</view>
				</view>
				<view class="text flex">
					<view class="label">
						<view>举报链接：</view>
						<view class="tibetan">ཐེར་འདོན་འབྲེལ་མཐུད།：</view>
					</view>
					<view class="value">
						<view>{{item.a_jubao_link}}</view>
						<!-- <view class="tibetan">ཡིག་སྒྱུར་མཇ</view> -->
					</view>
				</view>
				<view class="text flex">
					<view class="label">
						<view>举报证据：</view>
						<view class="tibetan">ཐེར་འདོན་དཔང་རྟགས།：</view>
					</view>
					<view class="media" v-if="item.files">
						<block v-for="(ite, idx) in item.files" :key="idx">
							<image v-if="ite.type === 'image'" class="image" :src="ite.url" mode="aspectFill" @click="previewImage(index)"></image>
							<view v-else class="video flex flex-col items-center justify-center" @click="previewVideo(index,idx)">
								<u-icon color="#80CBF9" size="26" name="movie"></u-icon>
								<text class="icon__text">视频</text>
							</view>
						</block>
					</view>
					<view class="value" v-if="item.files.length == 0">
						<view>无</view>
					</view>
				</view>
				<view class="text flex">
					<view class="label">
						<view>其他：</view>
						<view class="tibetan">གཞན་དག：</view>
					</view>
					<view class="value">
						<view v-if="item.a_remark">{{item.a_remark}}</view>
						<view v-else>无</view>
						<!-- <view class="tibetan">ཡིག་སྒྱུར་མཇ</view> -->
					</view>
				</view>
				<view class="text flex">
					<view class="label">
						<view>提交时间：</view>
						<view class="tibetan">ཡིག་སྒྱུར་མཇ：</view>
					</view>
					<view class="value">
						<view>{{item.add_time}}</view>
						<!-- <view class="tibetan">ཡིག་སྒྱུར་མཇ</view> -->
					</view>
				</view>
				<view class="text flex" v-if="item.a_status != 0 && item.a_audit_remark">
					<view class="label">
						<view>回复：</view>
						<view class="tibetan">ཡིག་སྒྱུར་མཇ：</view>
					</view>
					
					<view :class="item.a_status == 1?'completed':'error'" >
						<view>{{item.a_audit_remark}}</view>
					</view>
				</view>
			</view>
			<view class="noContent" v-if="this_data_list.length == 0">
				<image class="noContentImage" mode="widthFix" src="/static/empty.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require('../../common/util.js');
	export default {
		data () {
			return {
				this_data_list:[],
				current:0,
				tabList: [{
					name: '待审核',
                }, {
					name: '已审核',
                }, {
					name: '已驳回',
                }],
			}
		},
		onLoad(opt) {
			this.current = opt.a_status || 0;
			this.loadData();
		},
		methods: {
			loadData: function() {
				let that = this;
				var requsetData = {};
				requsetData.a_status = that.current;
				util.requestPost(
					'/User/getUserJiubiLog',
					requsetData,
					function(res) {
						that.this_data_list = res.data.this_data_list;
					},
					'',
					{ isShowLoading: false }
				);
			},
			changeTab(e){
				this.current = e.index;
				this.loadData();
			},
			previewImage (index) {
				const urls = []
				this.this_data_list[index].files.forEach(item => {
					if (item.type === 'image') {
						urls.push(item.url)
					}
				})
				uni.previewImage({
					urls
				})
			},
			previewVideo (index,idx) {
				const url = this.this_data_list[index].files[idx].url
				uni.navigateTo({
					url: '/pages/my/video?url=' + url
				})
			}
		}
	}
</script>

<style lang="scss">
.examine-page {
	min-height: 100%;
	background-color: $bg-color;
	.tab-box {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: #fff;
	}
	.list {
		padding: 30rpx;
		.item-box {
			padding: 20rpx 32rpx;
			border-radius: 16rpx;
			background-color: #fff;
			&:not(:last-of-type) {
				margin-bottom: 20rpx;
			}
			.text {
				padding: 20rpx;
				border-bottom: $border-base;
				color: #333333;
				font-size: 30rpx;
				.label {
					width: 200rpx;
				}
				.value {
					// width: 402rpx;
					margin-left: 12rpx;
					word-break: break-all;
				}
				.tibetan {
					margin-top: 4rpx;
					font-size: 24rpx;
				}
				.completed{
					color:green;
					font-weight: bold;
				}
				.error{
					color:red;
					font-weight: bold;
				}
				.media {
					margin-top: 12rpx;
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx;
					.image {
						width: 180rpx;
						height: 180rpx;
						border-radius: 8rpx;
					}
					.video {
						width: 180rpx;
						height: 180rpx;
						border-radius: 8rpx;
						background-color: #f2f2f2;
					}
				}
			}
		}
	}
}
</style>
